<template>
	<view class="flex flex-col h-screen">
		<NavBarVue title="排行榜" :leftIcon="false"></NavBarVue>
		<!-- <view class="flex p-20 border-b justify-center">
			<view :class="[tab==i?'font-bold':'','flex px-30 flex-col items-center']" v-for="e,i in tabList" :key="i"
				@click="tab=i">
				<text class="text-sm">{{e}}</text>
				<view class="h-6 w-40 bg-[#329EFF]" v-if="tab==i">
				</view>
			</view>
		</view> -->
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full" :refresher-enabled="refresherEnabled" :refresher-triggered="triggered"
				@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
				@refresherabort="onAbort">
				<view class="p-30">
					<RanKingVue></RanKingVue>
					<!--  -->
					<!-- <view class="bg-white p-30 flex flex-wrap justify-between rounded-lg border-[#FFCE99] border-solid">
						<view class="bg-[#F4F7FA] flex p-20 items-center mb-20 rounded-lg"
							style="width: calc(50% - 10rpx)" v-for="e,i in userList" :key="i" @click="onPath">
							<view class="w-[36rpx] h-[40rpx] bg-cover flex justify-center items-center"
								:style="{backgroundImage:`url(/static/live/${(i+1)<=3?('list'+(i+1)):'list'}.png)`}">
								<text class="font-bold text-white">{{i+1}}</text>
							</view>
							<view class="w-[80rpx] h-[80rpx] rounded-full overflow-hidden mx-20">
								<ImageBoxVue :src="e.headImg"></ImageBoxVue>
							</view>
							<text class="text-sm font-bold">{{e.name}}</text>
						</view>
					</view> -->
					<!--  -->
						<!-- <button @click="onTaluo">塔罗</button> -->
					<view class="mt-30 flex-1 flex flex-col overflow-hidden">
						<view class="flex justify-between items-center">
							<text class="font-bold text-sm">正在直播</text>
							<!-- <ImageBoxVue src="/static/live/live_title1.png" width="132rpx" height="43rpx"></ImageBoxVue> -->
							<view class="flex justify-center items-center" @click="onList(0)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="mt-30">
							<view class="flex flex-wrap justify-between">
								<LiveBoxVue v-for="e,i in liveData" :index="i" :key="i" :val="e"></LiveBoxVue>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="mt-30 flex-1 flex flex-col overflow-hidden">
						<view class="flex justify-between items-center">
							<text class="font-bold text-sm">语音单独陪伴</text>
							<!-- <ImageBoxVue src="/static/live/live_title1.png" width="132rpx" height="43rpx"></ImageBoxVue> -->
							<view class="flex justify-center items-center" @click="onList(1)">
								<text class="text-sm">更多</text>
								<uni-icons type="right" size="18"></uni-icons>
							</view>
						</view>
						<view class="mt-30">
							<view class="" v-for="e,i in liveData1" :index="i" :key="i">
								<microphoneVue :val="e"></microphoneVue>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onLoad,
	} from "@dcloudio/uni-app"
	import {
		debounce
	} from '@/config/publicFun.js'
	import LiveBoxVue from './components/live/LiveBox.vue';
	import RanKingVue from "./components/live/Ranking.vue"
	import microphoneVue from "../live/components/microphone.vue"
	import liveApi from '../../apis/apiList/liveApi';
	const tab = ref(0)
	const tabList = ["实力榜", "热搜榜", "好评榜"]

	const liveData = ref([])
	const liveData1 = ref([])
	const refresherEnabled = ref(true)
	const triggered = ref(false)
	const _freshing = ref(false)

	onLoad(() => {
		getList()
		getAnchorList()
	})
	const onPulling = (e) => {
		console.log("onpulling", e);
	}
	const onRefresh = () => {
		if (_freshing.value) return;
		_freshing.value = true;
		getAnchorList()
	}
	const onRestore = () => {
		triggered.value = 'restore'; // 需要重置
		console.log("onRestore");
	}
	const onAbort = () => {
		console.log("onAbort");
	}
	const getList = () => {
		liveApi.getLiveRoomlist({
			sts: "0",
			page: 1,
			limit: 10
		}).then(res => {
			liveData.value = res.data
		})
	}
	const getAnchorList = () => {
		triggered.value = true
		liveApi.getAnchorlistAtexamine({
			examine: "0",
			page: 1,
			limit: 10
		}).then(res => {
			liveData1.value = res.data
			triggered.value = false;
			_freshing.value = false;
		})
	}
	const onPath = () => {
		uni.navigateTo({
			url: "/pages/live/liveRoom"
		})
	}
	const onList = (sts) => {
		uni.navigateTo({
			url: `/pages/live/liveList?sts=${sts}`
		})
	}
	const onTaluo = () => {
		uni.navigateTo({
			url: '/pages/views/tarot'
		})
	}
</script>